<template>
	<view class="change_pass">
		<ul class="user_list">
			<li class="user_item">
				<image src="../../static/image/pass@2x.png" mode=""></image>
				<input type="text" v-model="password" placeholder="填写原密码">
			</li>

			<li class="user_item">
				<image src="../../static/image/pass@2x.png" mode=""></image>
				<input type="text" v-model="newPassword" placeholder="6-20位登录密码">
			</li>

			<li class="user_item">
				<image src="../../static/image/pass@2x.png" mode=""></image>
				<input type="text" v-model="confirmPassword" placeholder="再次确认密码">
			</li>

		</ul>
		<div class="confirm" @click="changePass">
			确认
		</div>
	</view>
</template>

<script>
	import {
		throtTling
	} from '../../utils/throttling.js'
	export default {
		data() {
			return {
				password: '',
				newPassword: '',
				confirmPassword: ''
			};
		},
		methods: {
			changePass: throtTling(function() {
				let that = this
				let data = {
					password: that.password,
					new_password: that.newPassword,
					confirm_password: that.confirmPassword
				}
				that.$http({
					url: '/wxapi/user_api/updatepassword',
					data: data,
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.removeStorage({
							key: 'token',
							success() {
								setTimeout(() => {
									uni.navigateTo({
										url: '../login/Login'
									})
								}, 1000)
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}, 1000)
		}
	}
</script>

<style lang="less" scoped>
	.change_pass {
		height: 100%;

		.user_list {
			margin: 0 60rpx;

			.user_item {
				padding: 20rpx 0;
				display: flex;
				height: 85rpx;
				border-bottom: 2rpx solid #D9E1E9;

				image {
					margin: auto 0;
					width: 50rpx;
					height: 50rpx;
				}

				input {
					padding-left: 40rpx;
					height: 80rpx;
					font-size: 28rpx;
					color: #B5C1CD;
					flex: 1;
				}
			}
		}

		.confirm {
			margin: 120rpx 30rpx 0 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
			background-color: #2595FF;
			border-radius: 45rpx;
		}
	}
</style>
